﻿<!DOCTYPE html>
<html style="background-color: white;">
<!-- paramsSetting 参数设置页面 -->
<head>
    <title>参数设置页面</title>

    <style>
        html,
        body {
            width: 99%;
            height: 100%;
        }

        body {
            margin: 10 10 10 10;
            padding: 0;
        }
    </style>
    <link rel="stylesheet" href="./css/notiflix-3.2.5.min.css">
    <script src="./js/notiflix-3.2.5.min.js"></script>
    <script src="./js/vue.min.js"></script>
    <script src="./js/element-ui/index.js"></script>
    <link rel="stylesheet" href="./js/element-ui/index.css">
    <script src="./config.js"></script>
</head>

<body>
    <div id="app" style="height: 800px; overflow-y:auto;overflow-x: hidden;">
        <div v-for="(item, index) in paramsData">
            <el-divider content-position="left"><span style="font-size:20px;font-weight: bold;">{{item.groupName}}</span></el-divider>
            <el-row :gutter="20">
                <el-form label-position="right" label-width="250px" :ref="item.groupKey" :model="item.model">
                    <el-col :span="8" v-for="(jtem,idx) in item.datas">
                        <el-form-item :rules="jtem.rules" :label="jtem.label" :prop="jtem.key">
                            <el-input v-if="jtem.type==='input'" v-bind="$attrs" v-on="$listeners" type="text"
                                v-model="item.model[jtem.key]" :disabled="jtem.disabled" :placeholder="'请输入'+jtem.label"
                                style="width: 70%;"></el-input>
                            <el-select v-else-if="jtem.type==='select'" v-bind="$attrs" v-on="$listeners"
                                v-model="item.model[jtem.key]" :disabled="jtem.disabled" style="width: 70%;">
                                <el-option v-for="ktem in jtem.range" :key="ktem" :label="ktem" :value="ktem">
                                </el-option>
                            </el-select>
                            <el-switch v-else-if="jtem.type==='switch'" v-model="item.model[jtem.key]"
                                :disabled="jtem.disabled"></el-switch>
                            <el-radio-group v-else-if="jtem.type==='radio'" :disabled="jtem.disabled"
                                v-model="item.model[jtem.key]">
                                <el-radio v-for="ktem in jtem.range" :label="ktem"></el-radio>
                            </el-radio-group>
                            <span v-else>未知控件类型</span>
                        </el-form-item>
                    </el-col>
                </el-form>
            </el-row>
        </div>
        <el-button type="primary" @click="submitForm()" :disabled="disabled" style="float: right;">提交</el-button>
    </div>

    <script>
        let paramsDataTemp = [];
        let userRights=null;
        
        // 加载
        window.onload = function () {
            // userRights=getUrlParam("userRights")
            userRights = localStorage.getItem("userRights");
            Notiflix.Notify.init({timeout: g_NotiflixTimeout});
            let Component = Vue.extend(Main);
            new Component().$mount('#app');
        };

        let checkInputPrecision = (rule, value, callback) => {
            let regular;
            switch (rule.precision) {
                case 0:
                    regular = /^[+-]?(0|([1-9]\d*))$/;
                    break;
                case 1:
                    regular = /^[+-]?(0|([1-9]d*)+)(.\d{1})?$/;
                    break;
                case 2:
                    regular = /^[+-]?(0|([1-9]d*)+)(\.\d{1,2})?$/;
                    break;
            }
            if (!(regular.test(value))) {
                // callback(new Error('请输入数字,小数点后' + rule.precision + '位'));
            } else {
                callback();
            }
        };

        let checkInputRange = (rule, value, callback) => {
            if (value < rule.min) {
                callback(new Error('最小值不能小于' + rule.min));
            } else if (value > rule.max) {
                callback(new Error('最大值不能超过' + rule.max));
            } else {
                callback();
            }
        };

        let Main = {
            data() {
                return {
                    loading: true,
                    paramsData: [],
                    disabled:false
                }
            },

            methods: {
                submitForm() {
                    let validSucc = false;
                    let request = {};
                    for (let item of this.paramsData) {
                        validSucc = true;
                        for (let jtem of item.datas) {
                            request[item.groupKey + "$" + jtem.key] = item.model[jtem.key];
                        }
                    }
                    if (validSucc) {
                        request.Function = "UpdateClientCustomConfig";
                        fetch(g_CenterHttpUrl, {
                            method: 'post',
                            body: JSON.stringify(request),
                            headers: { 'Content-Type': 'application/json' }
                        }).then((e) => {
                            e.text().then(data => {
                            let jdata = JSON.parse(data);
                                if(jdata.Code == g_ResCodeSuccess) {
                                    Notiflix.Notify.success('成功!');
                                }
                                else {
                                    Notiflix.Notify.warning(jdata.Message);
                                }
                            });
                        });
                    }
                },
                getParams() {
                    let request = {};
                    request.Function = "GetClientCustomConfig";
                    fetch(g_CenterHttpUrl, {
                        method: 'post',
                        body: JSON.stringify(request),
                        headers: { 'Content-Type': 'application/json' }
                    }).then((e) => {
                        e.text().then(data => {
                        let jdata = JSON.parse(data);
                            if(jdata.Code == g_ResCodeSuccess) {
                                let data = jdata.Message;
                                let group;
                                let paramTemp = {};
                                paramsDataTemp = [];
                                for (let item of data) {
                                    if (group != item.CLASS_NAME) {
                                        if (group != undefined) {
                                            paramsDataTemp.push(paramTemp);
                                        }
                                        paramTemp = {};
                                        group = item.CLASS_NAME;
                                        paramTemp.groupKey = item.CLASS_NAME;
                                        paramTemp.groupName = item.GROUP_NAME;
                                        paramTemp.datas = [];
                                        paramTemp.model = {};
                                    }
                                    let dataTemp = {};
                                    dataTemp.key = item.PROPERTY_NAME;
                                    dataTemp.label = item.DESCRIPTION;
                                    dataTemp.type = item.CONTROL_TYPE;
                                    dataTemp.disabled = item.CONTROL_STATE == 1 ? true : false;
                                    dataTemp.key = item.PROPERTY_NAME;
                                    dataTemp.key = item.PROPERTY_NAME;
                                    dataTemp.rules = [];
                                    switch (item.CONTROL_TYPE) {
                                        case 'input':
                                            paramTemp.model[item.PROPERTY_NAME] = item.PROPERTY_VALUE;
                                            // if (item.RANGE != '') {
                                            //     let ranges = item.RANGE.split(",");
                                            //     dataTemp.rules.push({ validator: checkInputRange, min: parseFloat(ranges[0]), max: parseFloat(ranges[1]), text: "测试1", trigger: 'blur' });
                                            // }
                                            dataTemp.rules.push({ validator: checkInputRange, min: parseFloat(item.MIN_VALUE), max: parseFloat(item.MAX_VALUE), text: "测试1", trigger: 'blur' });
                                            if (item.PRECISION != '') {
                                                dataTemp.rules.push({ validator: checkInputPrecision, precision: parseInt(item.PRECISION), text: "测试1", trigger: 'blur' });
                                            }
                                            break;
                                        case 'select':
                                        case 'radio':
                                            paramTemp.model[item.PROPERTY_NAME] = parseFloat(item.PROPERTY_VALUE);
                                            let rangeArr = item.RANGE.split(",");
                                            dataTemp.range = [];
                                            for (let jtem of rangeArr) {
                                                dataTemp.range.push(parseFloat(jtem))
                                            }
                                            break;
                                        case 'switch':
                                            paramTemp.model[item.PROPERTY_NAME] = item.PROPERTY_VALUE == 'False' ? false : true;
                                            break;
                                    }
                                    if (item.REQUIRED === '1') {
                                        dataTemp.rules.push({ required: true, message: '请输入' + item.PARAMS_DESC, trigger: 'blur' });
                                    }
                                    paramTemp.datas.push(dataTemp);
                                }
                                if (group != undefined) {
                                    paramsDataTemp.push(paramTemp);
                                    this.paramsData = paramsDataTemp;
                                }
                            }
                            else {
                                Notiflix.Notify.warning(jdata.Message);
                            }
                        });
                    });
                }
            },

            mounted() {
                this.disabled=userRights > '1'?false:true;
                // this.paramsData = paramsDataTemp;
                this.getParams();
            }
        }
    </script>
</body>

</html>